<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>定义资源</title>
    <link rel='stylesheet' href='<%- rootUrl %>/res/adapter.css' />
    <script src="<%- rootUrl %>/res/adapter.js"></script>
</head>
<body style="font: 400 13.3333px Arial;">
<alljs-widget><message-top><%- message %></message-top></alljs-widget>
<p id="content" style="text-align:center;width:253px"></p>
<div id="restype1">
<p><label><input name="restype" type="radio" checked onchange="refreshUI(1)"><b>网络地址</b></label></p>
<p><input name="url" type="text" style="margin-right:6em" /></p>
<p><input type="submit" value="确定选择" onclick="window.location.href='./upResource.html?url='+document.getElementsByName('url')[0].value" /></p>
</div>
<hr/>
<div id="restype2">
<p><label><input name="restype" type="radio" onchange="refreshUI(2)"><b>上传文件</b></label></p>
<form action="./upload?returnType=resourcePage" method="post" enctype="multipart/form-data">
    <p><input type="file" name="content_single" /></p>
    <p><input type="submit" value="立刻上传" /></p>
</form>
</div>
<script>
var contentUrl = window.getUrlParam('url');
if (contentUrl != null && contentUrl !== ''){
    let dom = document.getElementById('content');
    let pos = contentUrl.lastIndexOf('.');
    if (pos > 0 && pos < contentUrl.length - 1){
        let ext = contentUrl.substr(pos+1).toLowerCase();
        if (ext.match(/^(png|jpe?g|gif|tiff?|svg|tga|ico|icns|bmp|webp)$/)){
            dom.innerHTML = '<img src="'+contentUrl+'" style="max-width:253px" />';
        } else if (ext.match(/^mp4|mkv|mov|ogg|flv|avi|3gp|wmv|webm|mpe?g|rm|rmvb$/)) {
            dom.innerHTML = '<video controls style="max-width:253px"><source src="'+contentUrl+'" type="audio/'+ext+'" /></video>';
        } else if (ext.match(/^(mp3|wma|ape|flac|aac|ac3|mmf|amr|m4a|m4r|wav|ra|cda|midi)$/)){
            dom.innerHTML = '<audio controls style="max-width:253px"><source src="'+contentUrl+'" type="audio/'+ext+'" /></audio>';
        } else {
            dom.innerHTML = '<img src="'+contentUrl+'" style="max-width:253px" />';
        }
    } else {
        dom.innerHTML = '<img src="'+contentUrl+'" style="max-width:253px" />';
    }
}

var refreshUI = function(e){
    document.getElementById('restype1').querySelectorAll('input[type=text]').forEach((p)=>{p.disabled = e !== 1});
    document.getElementById('restype1').querySelectorAll('input[type=submit]').forEach((p)=>{p.disabled = e !== 1});
    document.getElementById('restype2').querySelectorAll('input[type=submit]').forEach((p)=>{p.disabled = e === 1});
    document.getElementById('restype2').querySelectorAll('input[type=file]').forEach((p)=>{p.disabled = e === 1});
};
refreshUI(1);
</script>
</body>
</html>